<template>
  <div class="order-import-button">
    <div style="display: flex;" class="hover">
      <el-upload
        v-if="!onlyFileList"
        ref="elUpload"
        :multiple="false"
        :show-file-list="false"
        :http-request="uploadFileMethod"
        :before-upload="beforeUpload"
        :disabled="isDisabled || loading"
        :auto-upload="true"
        :class="{'isDisabled': isDisabled}"
        :accept="accept"
        action
        class="medium-file-uploader"
      >
        <div v-loading="loading" class="img-inner">
          <img v-if="fileList && fileList !== ''" :src="fileList" class="priview" alt="">
          <template v-else>
            <img :src="imgOutline" class="bg" alt="">
            <div class="summary">{{ text }}</div>
          </template>
        </div>
      </el-upload>
      <div v-if="fileList && fileList !== ''" :class="{'show-delete': showDelete}" class="close">
        <div class="close-text" @click="clearImg">清空</div>
      </div>
    </div>
  </div>
</template>
<script>
import ImportList from '@/mixins/importList';
import PasteClipboard from '@/mixins/pasteClipboard';
import uploadIcon from '@/assets/export.png';
import downloadIcon from '@/assets/icon-upload-blue.png';
import { downloadFile } from '@/utils';
import { format } from '@/filters/date';
import imgOutline from '@/assets/chartsTheme/img-outline.png';
export default {
  name: 'ImportButton',
  filters: { format },
  mixins: [ImportList, PasteClipboard],
  props: {
    fileList: {
      type: String,
      default: ''
    },
    extendParams: {
      type: Object,
      default: null
    },
    // 控制是否显示成功和失败提示框
    hideConfirm: {
      type: Boolean,
      default: false
    },
    // 是否可以点击
    isDisabled: {
      type: Boolean,
      default: false
    },
    importApi: {
      type: String,
      default: () => {
        return '';
      }
    },
    getList: { // 导入后列表刷新的方法
      type: Function,
      default: null
    },
    onlyFileList: { // 隐藏上传按钮
      type: Boolean,
      default: false
    },
    hideClipUp: { // 隐藏剪切板上传
      type: Boolean,
      default: false
    },
    titleBg: { // 图表标题模块上传背景图
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: ''
    },
    limitFileSize: {
      type: Number,
      default: null
    },
    text: {
      type: String,
      default: '上传背景图片'
    },
    showDelete: { // 隐藏清空按钮
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploadIcon, downloadIcon, imgOutline,
      isSealing: false,
      limitNum: false,
      notVerification: true,
      fileName: '',
      fileNameCopy: ''
    };
  },
  computed: {
    isPasteAble() { // pasteClipboard
      return !(this.isDisabled || this.loading);
    }
  },
  methods: {
    pasteCallback(file) { // pasteClipboard
      if (this.beforeUpload(file)) this.uploadFileMethod({ file });
    },
    removeFile(file, index) {
      this.$emit('removeFileList', { file, index });
    },
    clearImg() {
      this.$emit('removeFileList');
    },
    downloadFile(url, name) {
      const img = /(\.(gif|png|jpg|jpeg|webp|bmp|tif))$/i;
      if (img.test(name)) {
        window.open(url);
      } else {
        downloadFile(url, name);
      }
    }
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: inline-block;
  text-align: left;
}
.isDisabled {
  opacity: 0.5;
  & ::v-deep {
    .el-upload  {
      cursor: not-allowed;
    }
  }
}
.img-inner {
  width: 120px;
  height: 68px;
  background: #F7F7F7;
  border-radius: 4px;
  border: 1px dashed #DDDDDD;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  .icon {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 20px;
  }
  .bg {
    width: 24px;
    height: 24px;
  }
  .priview {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .summary {
    margin-top:10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 12px;
  }
}
.order-import-button {
  .import-btn {
    width:180px;
    height:32px;
    display: flex;
    align-items: center;
    color: #406EFF;
    border: 1px solid #406EFF;
    border-radius:4px;
    font-size: 14px;
    padding: 1px 8px;
    justify-content: center;
    img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      position: relative;
    }
    .content {
      display: inline-block;
    }
  }
  & ::v-deep {
    .el-upload  {
      &>div {
        align-items: center;
        display: flex;
      }
    }
  }
  .medium-file-uploader {
    align-items: center;
    display: flex;
  }
  .clip-btn {
    background-color: white;
    color: #406EFF;
    border: 1px solid #406EFF;
    border-radius: 4px;
    flex: 1;
    margin-left: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    &[disabled=disabled] {
      color: #a1b7ff;
      border: 1px solid #a1b7ff;
      cursor: not-allowed;
    }
  }
  .hover {
    &:hover {
      .close {
        display: flex;
      }
    }
  }
  .close {
    font-size: 13px;
    cursor: pointer;
    color: #406EFF;
    margin-left:10px;
    align-items: flex-end;
    display: none;
    .close-text {
      white-space: nowrap;
      line-height: 20px;
    }
    &:hover{
      color: #1c4ae0;
    }
  }
  .show-delete {
    display: flex;
  }
  .file-container {
    margin-top: 10px;
    .file-item {
      align-items: center;
      display: flex;
      cursor: pointer;
      padding: 0 5px;
      border-radius: 3px;
      .el-icon-document {
        font-size: 14px;
        margin-right: 5px;
        color: #909399;
      }
      .name {
        font-size: 13px;
        color: #333;
        flex:1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 85%;
      }
      &:hover {
        background-color: #f5f7fa;
        .name {
          color: #406EFF;
        }
        .icon {
          display: block;
        }
      }
    }
  }
}
</style>
